<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        圖片標籤用於向當前頁面引入一個外部圖片
            使用img標籤來引入外部的圖片,img標籤是一個自結束標籤(只需要一個代碼,不需要一個重複來結束)
            img這種元素屬於替換元素(基於塊和行內元素之間,有兩種元素的特點)
            屬性:
                src 屬性的作用是指定外部圖片的路徑(路徑規則和超鏈接是一樣的!)

                alt 屬性的作用是:圖片的描述,這個描述默認情況下不會顯示,
                有些瀏覽器在圖片無法加載的時候,顯示出來.可以測試京東的網站.
                搜索引擎會根據alt中的內容來識別圖片
                
                當你使用搜索引擎搜索時會,如果你搜索相對名字的圖片內
                含有alt屬性的,會搜索出來

                width 圖片的寬度
                height 圖片的高度
                    -寬度和高度中如果只修改了一個,則另一個會等比例縮放

                注意
                    一般情況在PC端,不建議修改圖片的大小
                    在手機端,經常需要對圖片進行縮放



        圖片的格式:
            jpeg(jpg)
                -支持的顏色豐富,但是不支持透明小國,不支持動圖
                -一般來顯示圖片.
            gif
                -支持的顏色較少,支持簡單透明,支持動圖
                -顏色單一的圖片,動圖    
            png
                -支持的顏色豐富,支持複雜透明,不支持動圖
                -顏色豐富,複雜透明圖片(專為網頁而生)
            webp
                -這種格式是谷歌新推出的專門用來表示網頁中的圖片的一種格式
                -它具備其他圖片格式的所以優點,而且圖片還特別小
                -致命缺點:兼容性不好

            base64(對數據進行加密)
                -將圖片使用base64進行編碼,可以將圖片轉換為字符,通過字符的格式來引入圖片
                -一般都是一些需要和網頁一起加載的圖片才會是使用base64



            效果一樣,用小的
            效果不一樣,用效果好的


            -->
     <img width="" height=""  src="../img/1.jpg" alt=" 我的二次元!">

        

</body>
</html>